<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				margin: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100vh;
				background: #222;
			}
			.box{
				width: 600px;
				height: 380px;
				border: 10px solid #999;
				overflow: hidden;
				border-radius: 20px;
				position: relative;
				cursor: pointer;
			}
			img{
				width: 600px;
				height: 380px;
			}
			.text{
				width: 600px;
				position: absolute;
				bottom: -50px;
				display: flex;
				justify-content: center;
				color: #fff;
				line-height: 50px;
				background: rgba(0,0,0,0.5);
				transition: 0.5s;
			}
			.box:hover .text{
				bottom: 0px;
			}
			/* 按钮 */
			.box a{
				width: 80px;
				height: 80px;
				border: 5px solid #D6D6D6;
				background: rgba(0,0,0,0.4);
				color: #fff;
				position: absolute;
				top:145px;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				text-decoration: none;
				transition: 0.3s;
			}
			.box .left{
				left:12px;
			}
			.box .right{
				right:12px;
			}
			.box a:hover{
				transform: scale(1.1);
				background: rgba(0,0,0,0.6);
			}
		</style>
	</head>
	<body>
		<div class="box">
			<img src="./images/bg4.jpg" alt="">
			<div class="text">魔 方</div>
			<a class="left" href="#">Prev</a>
			<a class="right" href="#">Next</a>
		</div>
	</body>
</html>
